import { Image, View } from '@tarojs/components'
import { useState, useEffect, useRef } from 'react'
import Taro from '@tarojs/taro'
import { API_BASE_URL } from '../../../config/env'
import imageCacheManager from '../../utils/imageCache'
import './SimpleImage.scss'

const SimpleImage = ({
  src,
  alt = '',
  className = '',
  style = {},
  fallbackSrc = '',
  onLoad,
  onError,
  showLoadingSpinner = true,
  ...props
}) => {
  const [imageLoaded, setImageLoaded] = useState(false)
  const [imageError, setImageError] = useState(false)
  const [retryCount, setRetryCount] = useState(0)
  const [localImageUrl, setLocalImageUrl] = useState(null) // 本地缓存的图片URL
  const timeoutRef = useRef(null)
  const maxRetries = 3 // 增加重试次数，提高成功率

  // 当src改变时重置状态
  useEffect(() => {
    // 检查是否有全局缓存
    const cachedPath = imageCacheManager.getCache(src)
    const cachedLoaded = imageCacheManager.getLoadingState(src)
    
    if (cachedPath && cachedLoaded) {
      // 如果有缓存且已加载，直接使用缓存
      console.log('🖼️ 使用全局缓存图片:', src, '->', cachedPath)
      setLocalImageUrl(cachedPath)
      setImageLoaded(true)
      setImageError(false)
      setRetryCount(0)
    } else {
      // 没有缓存，正常加载流程
      setImageLoaded(false)
      setImageError(false)
      setRetryCount(0)
      setLocalImageUrl(cachedPath) // 如果有缓存路径但没有加载状态，先设置路径
      console.log('🖼️ 开始加载图片:', src)
    }
    
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current)
      }
    }
  }, [src])

  // 处理图片URL，将相对路径转换为完整URL
  const getFullImageUrl = (imageUrl) => {
    console.log('🖼️ 原始图片URL:', imageUrl)
    console.log('🌐 API_BASE_URL:', API_BASE_URL)
    
    if (!imageUrl) {
      console.log('❌ 图片URL为空，使用备用图片')
      return fallbackSrc
    }
    
    if (imageUrl.startsWith('data:')) {
      console.log('✅ 检测到base64图片，直接使用')
      return imageUrl
    }
    
    // 处理完整URL，包括localhost替换
    if (imageUrl.startsWith('http')) {
      // 检查是否包含localhost，如果是则替换为API_BASE_URL
      if (imageUrl.includes('localhost') || imageUrl.includes('127.0.0.1')) {
        const path = imageUrl.replace(/^https?:\/\/[^\/]+/, '')
        const newUrl = `${API_BASE_URL}${path}`
        console.log('🔄 检测到localhost，替换为API_BASE_URL:', newUrl)
        return newUrl
      }
      console.log('✅ 检测到完整URL，直接使用:', imageUrl)
      return imageUrl
    }
    
    const fullUrl = imageUrl.startsWith('/') 
      ? `${API_BASE_URL}${imageUrl}`
      : `${API_BASE_URL}/${imageUrl}`
    
    console.log('🔗 拼接后的完整URL:', fullUrl)
    return fullUrl
  }

  const handleLoad = () => {
    setImageLoaded(true)
    setImageError(false)
    
    // 更新全局缓存状态
    imageCacheManager.setLoadingState(src, true)
    if (localImageUrl) {
      imageCacheManager.setCache(src, localImageUrl)
    }
    
    console.log('✅ 图片加载成功:', src)
    onLoad?.(src)
  }

  // 智能降级：下载图片到本地
  const downloadImageToLocal = async (imageUrl) => {
    try {
      console.log('🔄 开始下载图片到本地:', imageUrl)
      const downloadResult = await Taro.downloadFile({
        url: imageUrl,
        timeout: 10000
      })
      
      if (downloadResult.statusCode >= 200 && downloadResult.statusCode < 300 && downloadResult.tempFilePath) {
        console.log('✅ 图片下载成功:', downloadResult.tempFilePath)
        setLocalImageUrl(downloadResult.tempFilePath)
        setImageError(false)
        setImageLoaded(false) // 重置加载状态，让本地图片重新加载
        
        // 更新全局缓存
        imageCacheManager.setCache(src, downloadResult.tempFilePath)
        
        return true
      } else {
        throw new Error(`下载失败，状态码: ${downloadResult.statusCode}`)
      }
    } catch (error) {
      console.error('❌ 图片下载失败:', error)
      return false
    }
  }

  const handleError = async () => {
    const newRetryCount = retryCount + 1
    setRetryCount(newRetryCount)
    
    console.log(`❌ 图片加载失败 (第${newRetryCount}次):`, src, { 
      retryCount: newRetryCount,
      fullUrl: getFullImageUrl(src),
      timestamp: new Date().toISOString()
    })
    
    // 立即尝试下载到本地，不等待重试
    console.log(`🔄 立即尝试下载图片到本地...`)
    const downloadSuccess = await downloadImageToLocal(getFullImageUrl(src))
    
    if (!downloadSuccess) {
      // 下载失败，如果还有重试次数，延迟重试
      if (newRetryCount <= maxRetries) {
        console.log(`🔄 下载失败，${2000 * newRetryCount}ms后重试加载图片...`)
        setTimeout(() => {
          setImageError(false)
          setImageLoaded(false)
          setRetryCount(newRetryCount)
        }, 2000 * newRetryCount) // 递增延迟
      } else {
        // 重试次数用完，显示失败状态
        setImageError(true)
        setImageLoaded(false)
        console.log(`💥 图片加载和下载都失败，已重试${maxRetries}次`)
        onError?.(new Error(`图片加载失败，已重试${maxRetries}次`))
      }
    }
  }

  return (
    <View className={`simple-image ${className}`} style={style}>
      {/* 加载状态 */}
      {!imageLoaded && !imageError && showLoadingSpinner && (
        <View className='image-loading'>
          <View className='loading-spinner'></View>
        </View>
      )}

      {/* 图片加载失败提示 */}
      {imageError && (
        <View className='image-error'>
          <View className='error-icon'>❌</View>
          <View className='error-text'>图片加载失败</View>
        </View>
      )}

      {/* 图片 */}
      {!imageError ? (
        <Image
          src={localImageUrl || getFullImageUrl(src)}
          alt={alt}
          className={`image ${imageLoaded ? 'loaded' : ''}`}
          mode='aspectFill'
          lazyLoad
          onLoad={handleLoad}
          onError={handleError}
          {...props}
        />
      ) : (
        <View className='image-placeholder'>
          <View className='placeholder-icon'>📷</View>
          <View className='placeholder-text'>暂无图片</View>
        </View>
      )}
    </View>
  )
}

export default SimpleImage
